<script setup>
import { computed, reactive, toRefs, ref, onMounted } from 'vue';
import { ElMessage, ElTabPane, ElTable, ElTableColumn, ElTabs } from 'element-plus';
import { delSystemRole, getSystemRoleAll, postSystemRole, putSystemRole } from '@/apis/api-system';
import { OPERATION_TYPE } from '@/common/js/common-const';
import ReleasePromptMessage from '@/components/ReleasePromptMessage.vue';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore } from '@/stores';
import ReleaseRoleOperation from './ReleaseRoleOperation.vue';

const props = defineProps({
  name: {
    type: String,
  },
});
const { name } = toRefs(props);

const titleName = computed(() => name.value);
const systemStore = useSystemStore();

const tableLoading = ref(false);
const roleShow = ref(false);
const roleType = ref('');
const roleData = ref({});
const tableData = ref([]);
const activeName = ref('系统角色');

const roles = computed(() => {
  return systemStore?.userInfo?.roles?.map((item) => {
    return item.title;
  });
});

const messageInfo = reactive({
  messageBoxShow: false,
  messageText: '',
  messageBoxType: '',
  infoBoxValue: null,
});

const handleRoleShowEmit = () => {
  resetMenu();
};

// 操作
const handleOperation = (type, item) => {
  if (!roles.value?.some((r) => ['超级管理员', '运维人员']?.includes(r))) return;

  roleType.value = type;

  if (type == OPERATION_TYPE.DELETE) {
    messageInfo.infoBoxValue = item;
    messageInfo.messageBoxType = '删除';
    messageInfo.messageBoxShow = true;
    messageInfo.messageText = '该数据删除后不可恢复，确定要删除吗？';
  }

  if (type == OPERATION_TYPE.EDIT || type == OPERATION_TYPE.LOOK) {
    roleShow.value = true;
    roleData.value = item;
  }

  if (type == OPERATION_TYPE.ADD) {
    roleShow.value = true;
  }
};

const handleMessageBox = (val) => {
  messageInfo.messageBoxShow = false;
  messageInfo.messageText = '';

  if (val) {
    //  删除接口
    delSystemRoleApi(messageInfo.infoBoxValue.id);
  }

  messageInfo.messageBoxType = '';
};

const resetMenu = () => {
  roleType.value = '';
  roleData.value = {};
  roleShow.value = false;
};

onMounted(() => {
  getSystemRoleAllApi();
});

// 数据
const handleRoleParamEmit = (value, type) => {
  if (type == 'ADD') {
    postSystemRoleApi(value);
  } else {
    putSystemRoleApi(value);
  }
};

/*
 *@description: 获取全部角色
 *@author:chen_fei
 *@Date: 2024-06-14 15:06:22
 */
const getSystemRoleAllApi = async () => {
  tableLoading.value = true;

  const [err, data] = await getSystemRoleAll();

  if (!err) {
    tableData.value = data.data;
    systemStore.getSystemRoleAllApi();

    setTimeout(() => {
      systemStore.SELECT_LOGIN_CURRENT();
    }, 100);
  }

  tableLoading.value = false;
};

/*
 *@description: 新建角色
 *@author:chen_fei
 *@Date: 2024-06-14 15:06:37
 */
const postSystemRoleApi = async (val) => {
  const [err] = await postSystemRole(val);

  if (!err) {
    ElMessage.success('新建成功');
  }

  resetMenu();
  getSystemRoleAllApi();
};

/*
 *@description: 编辑角色
 *@author:chen_fei
 *@Date: 2024-06-14 15:06:44
 */
const putSystemRoleApi = async (value) => {
  const [err] = await putSystemRole(value, value.id);

  if (!err) {
    ElMessage.success('编辑成功');
  }

  resetMenu();
  getSystemRoleAllApi();
};

/*
 *@description: 删除角色
 *@author:chen_fei
 *@Date: 2024-06-14 15:06:53
 */
const delSystemRoleApi = async (id) => {
  const [err] = await delSystemRole(id);

  if (!err) {
    ElMessage.success('删除成功!');
  }

  messageInfo.infoBoxValue = '';

  getSystemRoleAllApi();
};
</script>
<template>
  <div class="root h-100% w-100% rounded-5px">
    <h3 class="mb-30px">{{ titleName }}</h3>
    <div class="table-box-main">
      <ElTabs v-model="activeName" class="demo-tabs" type="card">
        <ElTabPane label="系统角色" name="系统角色">
          <div class="flex-x-end cursor-pointer">
            <div
              class="btn-add flex-center"
              :class="
                roles?.some((r) => ['超级管理员', '运维人员']?.includes(r))
                  ? 'bg-#1385cf cursor-pointer'
                  : 'bg-coolgray  cursor-no-drop'
              "
              @click="handleOperation('ADD')"
            >
              <SvgIconIndex icon-class="add" size="20px" />新建
            </div>
          </div>
          <div class="mt-20px">
            <ElTable
              v-loading="tableLoading"
              :data="tableData"
              style="width: 100%; height: 46.25rem"
              row-key="id"
              :header-cell-style="{
                color: '#333333',
                background: '#F3F3F3',
              }"
            >
              <ElTableColumn type="index" label="序号" align="center" width="85" />
              <ElTableColumn prop="title" label="角色名称" align="center" show-overflow-tooltip />
              <ElTableColumn prop="description" label="角色描述" align="center" show-overflow-tooltip />

              <ElTableColumn prop="createdDate" label="创建时间" align="center" show-overflow-tooltip />
              <ElTableColumn label="操作" align="center" width="240">
                <template #default="scope">
                  <div class="flex items-center justify-center">
                    <div
                      class="edit_btn flex-center"
                      :class="
                        roles?.some((r) => ['超级管理员', '值班人员', '运维人员']?.includes(r))
                          ? 'color-#1385cf cursor-pointer'
                          : 'color-coolgray  cursor-no-drop'
                      "
                      @click="handleOperation('EDIT', scope.row)"
                    >
                      编辑
                    </div>
                    <div
                      class="look_btn ml-5px mr-5px flex-center"
                      :class="
                        roles?.some((r) => ['超级管理员', '值班人员', '运维人员']?.includes(r))
                          ? 'color-#1385cf cursor-pointer'
                          : 'color-coolgray  cursor-no-drop'
                      "
                      @click="handleOperation('LOOK', scope.row)"
                    >
                      查看
                    </div>
                    <div
                      v-if="!scope.row.isDefault"
                      class="del_btn flex-center"
                      :class="
                        roles?.some((r) => ['超级管理员', '值班人员', '运维人员']?.includes(r))
                          ? 'color-#1385cf cursor-pointer'
                          : 'color-coolgray  cursor-no-drop'
                      "
                      @click="handleOperation('DELETE', scope.row)"
                    >
                      删除
                    </div>
                  </div>
                </template>
              </ElTableColumn>
            </ElTable>
          </div>
        </ElTabPane>
      </ElTabs>
    </div>
  </div>

  <!-- 提示 -->
  <ReleasePromptMessage
    v-if="messageInfo.messageBoxShow"
    :message-box-show="messageInfo.messageBoxShow"
    :message-text="messageInfo.messageText"
    :message-box-type="messageInfo.messageBoxType"
    @handle-message-box="handleMessageBox"
  />

  <ReleaseRoleOperation
    v-if="roleShow"
    :role-show="roleShow"
    :role-type="roleType"
    :role-data="roleData"
    :active-name="activeName"
    @handle-role-show-emit="handleRoleShowEmit"
    @handle-role-param-emit="handleRoleParamEmit"
  />
</template>

<style scoped lang="scss">
.root {
  padding: 1.5rem;
  font-size: $base-system-font-size-base;
  background-color: $base-background-white;

  .btn-add {
    width: 100px;
    height: 40px;
    color: $base-button-color-white;

    border-radius: 5px;
  }
  .edit_btn,
  .look_btn,
  .del_btn {
    font-size: $base-system-font-size-base;
  }

  :deep(.el-tabs__item) {
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
